<template>
	<li class="rl-item"  v-bind:href="href" v-on:click="go">  
	         <p>{{ lable }}</p>
	         <img v-bind:src="imgsrc">
	</li>
</template>

<script>
import routes from '../routes'

export default{ 
    props: ['href','lable','imgsrc'],
    methods : {
      go (event) { 
        event.preventDefault();
        window.history.pushState(
          null,
          routes[this.href],
          this.href
        )
        this.$root.currentRoute = this.href

      }
    }
}

</script>

<style>
li{
	list-style: none;
}
.rl-item{
	margin : 20px 0px;
	display: flex;  
	align-items: center;
	justify-content:  space-between;
	background-color: #fff; 
	padding: 20px; 
	border: none;
	border-radius: 3px;
}
.rl-item:hover{ 
	cursor: pointer;
}
.rl-item:active{
	color:#46A3FF;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.rl-item p{ 
	flex:1;
}
.rl-item img{ 
	height: 30px;
} 
</style>